<template>
     <div>
        <table class="categoryleft">
            <tr v-for="(item,index) in categorylist"
             :key='index'
             @click="trClick(index)"
             id="tritem" 
             :class="{isbgc:currentIndex===index}"
             >
                <td>{{item.title}}</td>
            </tr>
        </table>
    </div>
   
</template>
<script>
export default {
    name:'categoryleft',
    components:{
    },
    data(){
        return{
            currentIndex:0
        }
    },
    props:{
        categorylist:{
            type:Array,
            default:[]
        }
    },
    methods:{
        trClick(index){
            this.currentIndex = index
            // console.log(index);
            this.$emit('trClick',this.currentIndex)
        }
    }
}
</script>
<style scoped>
.categoryleft{
  position: fixed;
  left: 0;
  top: 44px;
  bottom: 44px;
  width: 25%;
  height:100vh;
  /* overflow: auto; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: space-between;
  background-color:#f6f6f6;
}
.categoryleft tr{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}
.categoryleft td{
    font-size: 15px;
}
.isbgc{
    background-color: white;
    color: #ff3324;
    border-left: 2px solid #ff3324;
}
</style>